<template>
	<view>
		<view class="head-tab flex-ca">
			<view class="" v-for="(item,index) in butList" :key="index">
				<button class="cu-btn round" :class="[index==type?'select-but':'no-select-but']"
				@click="setType(index)"
				>{{item.title}}</button>
			</view>
		</view>
		
		
		<view class="list-view">
			<view class="good-view flex-ss" v-for="(item,index) in goodsList" :key="index">
				<image src="../../static/temp/cate1.jpg" mode=""></image>
				<view class="right-view flex-cbc">
					<view class="r-title">
						asdasdasdada上啊立刻发绿山咖啡来看f
					</view>
					<view class="text-view">
						<view class="flex-cb">
							<text class="je">￥136</text>
							<text class="ys">
								<text>热销指数</text>
								<text>100</text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				butList:[
					{title:"全部"},
					{title:"洗护"},
					{title:"电器"},
					{title:"美食"},
					{title:"娱乐"},
				],
				goodsList:[
					1,1,1,1,1,1,1,1,1
				]
			}
		},
		methods: {
			setType(e){
				this.type = e;
			}
		}
	}
</script>

<style>
	.head-tab{
		background-color: #FA82CE;
		padding: 20upx;
	}
	.select-but{
		background:#FA82CE !important;
		border:2upx solid rgba(255,255,255,1) !important;
		color: rgba(255,255,255,1) !important;
	}
	.no-select-but{
		background:rgba(255,169,224,1) !important;
		color: rgba(255,255,255,1) !important;
		border:0 !important;
	}
	.list-view{
		padding: 20upx;
	}
	.good-view{
		padding: 20upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
		margin-bottom: 20upx;
	}
	.good-view image{
		width:204upx;
		height:204upx;
	}
	.right-view{
		height:204upx;
	}
	.text-view{
		width: 100%;
	}
	.r-title{
		font-size:28upx;
		font-weight:500;
		color:rgba(60,60,60,1);
		line-height:40upx;
	}
	.je{
		font-size:34upx;
		font-weight:500;
		color:rgba(245,68,68,1);
		line-height:48upx;
	}
	.ys{
		font-size:22upx;
		font-weight:500;
		color:rgba(124,124,124,1);
		line-height:30upx;
		border: 2upx solid #FA82CE !important;
	}
	.ys text:first-child{
		background:#FA82CE;
		color: #FFFFFF;
		
	}
	.ys text:last-child{
		
	}
</style>
